@include b('step-codelist') {
  @include e('content') {
    @include m('step') {
      /* 使用Grid布局替代Flex */
      display: grid;

      /* 自适应列数：最小120px，自动填充 */
      grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
      gap: 16px 0; /* 行间距48px（可独立设置） */ /* 列间距32px */
    }
    @include m('text') {
      margin-top: getCssVar(spacing, extra-tight);
    }
  }
  @include e('code-item') {
    display: flex;
    align-items: center;

    @include m('line') {
      display: inline-block;
      width: 100%;
      height: 4px;
      background-color: getCssVar(color, bg, 0);
      @include when('actived') {
        height: 3px;
        background-color: getCssVar(color, primary);
      }
    }

    @include m('finished') {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      color: getCssVar(color, text, 5);
      text-align: center;
      background-color: getCssVar(color, primary);
      border-radius: 50%;
    }

    @include m('actived') {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      color: getCssVar(color, text, 5);
      text-align: center;
      background-color: getCssVar(color, primary);
      border-radius: 50%;
    }
    @include m('unactived') {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      color: getCssVar(color, text, 5);
      text-align: center;
      background-color: getCssVar(color, bg, 0);
      border-radius: 50%;
    }
  }
  @include e('code-step') {
    @include m('text') {
      position: relative;
      left: calc(50% - 16px);
      width: 90px;
      text-align: center;
      transform: translateX(-50%);
    }
  }
}
